<template>
    <div class="app"> 
        <div class="title-header">
            <div class="top">
                <div class="header-one">
                    <div class="left-btn"></div>
                    <div class="center-btn">购物车</div>
                    <div class="right-view">
                        <div class="btn" @click="editAction()">
                            {{this.editStatus? "完成": "编辑"}}
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="tempgoodlist">
                <div class="goodlist">
                    <div class="goods" v-for="(category,index) in tempgoodlist" :key="index">
                        <div class="selectView">
                            <div class="selectBtn" @click="selectAction(category.id)">
                                <img :src="editStatus? category.edit_selected?selectedImg:unSelectedImg: category.shop_selected?selectedImg:unSelectedImg">
                            </div>
                        </div>
                        <div class="imgs" @click="goproduct(category.id)"><img :src="category.main_image"></div>
                        <div class="content">
                            <p>{{category.detail}}</p>
                            <div class="priceView">
                                <p class="pirce">￥{{category.price}}</p>
                                <div class="countNumber">
                                    <div class="subtrBtn" @click="subtrAction(category.id)">-</div>
                                    <div class="number">{{category.select_number}}</div>
                                    <div class="addBtn" @click="addAction(category.id)">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottomView">
                    <div class="view">
                        <div class="selectView">
                            <div class="selectBtn" @click="allSelectAction()">
                                <img :src="allIsSelected? selectedImg: unSelectedImg">
                            </div>
                        </div>
                        <div class="allText">全选</div>
                        <div class="totalText">合计:
                            <div class="price">￥2131231</div>
                        </div>
                    </div>
                    <div class="settlementBtn">去结算({{123}})</div>
                </div>
            </div>
            <div  class="else" v-else>
                <p>暂无商品数据</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"app",
    data() {
        return {
            editStatus: false, // 编辑状态  默认 false
            tempgoodlist:[],
            unSelectedImg: require('./../../assets/img/un-selected.png'),
            selectedImg: require('./../../assets/img/selected.png'),
            allIsSelected: false,
        }
    },
    mounted(){
         //this.init()
         this.initgooddata()
    },
    methods:{
        init(){
            this.$http({
                method:"get",
                url:this.$util.baseUrl+'app/app',
            }).then((res)=>{
                if(res.data.code=800000){
                    this.tempcategory = res.data.data
                }
            })
        },
        editAction() {
            this.editStatus = !this.editStatus;
            this.allIsSelected = false;
            if (this.editStatus) { // 编辑状态
                this.tempgoodlist.map((value, index)=> {
                    value.edit_selected = this.allIsSelected; // 编辑时候的选择状态
                });
            }else { // 购买状态
                this.tempgoodlist.map((value, index)=> {
                        value.shop_selected = this.allIsSelected; // 支付时候的选择状态
                });
            }
        },
        selectAction(id) {
            if (this.editStatus) { // 编辑状态
                this.tempgoodlist.map((value, index)=> {
                    if (value.id == id) {
                        value.edit_selected = !value.edit_selected; // 编辑时候的选择状态
                    }
                });
            }else { // 购买状态
                this.tempgoodlist.map((value, index)=> {
                    if (value.id == id) {
                        value.shop_selected = !value.shop_selected; // 支付时候的选择状态
                    }
                });
            }
        },
        addAction(id){
            this.tempgoodlist.map((value, index)=> {
                if (value.id == id) {
                    value.select_number = value.select_number+1; // 编辑时候的选择状态
                }
            });
        },
        subtrAction(id){
            this.tempgoodlist.map((value, index)=> {
                if (value.id == id) {
                    if (value.select_number!=0) {
                        value.select_number = value.select_number-1; // 编辑时候的选择状态
                    }
                }
            });
        },
        allSelectAction(){
            this.allIsSelected = !this.allIsSelected;
            if (this.editStatus) { // 编辑状态
                this.tempgoodlist.map((value, index)=> {
                    value.edit_selected = this.allIsSelected; // 编辑时候的选择状态
                });
            }else { // 购买状态
                this.tempgoodlist.map((value, index)=> {
                        value.shop_selected = this.allIsSelected; // 支付时候的选择状态
                });
            }
        },
        initgooddata(){
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/getgoodlist',
                // data:data
            }).then((res)=>{
                if(res.data.code=800000){
                    let tempgoodlist = res.data.data;
                    //tempgoodlist.push.apply(tempgoodlist,tempgoodlist);
                    tempgoodlist.map((value, index)=> {
                        
                        value.edit_selected = false; // 编辑时候的选择状态
                        value.shop_selected = false; // 支付时候的选择状态
                        value.select_number = 0;
                    });
                    this.tempgoodlist = tempgoodlist;
                }
            })
        },
        goproduct(productid){
            let proids = this.$md5("222222"+productid)
            this.$router.push({
                path: 'describe',
                query: {
                    id: proids+"000cyf"+productid
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
       .title-header{
           width: 100%;
           border: 1px solid white;
           box-sizing: border-box;
           .top{
                background: white;
                position: fixed;
                width: 100%;
                z-index: 999;
           }
           .header-one{
                width: 100%;
                height: 100px;
                background: #c49852;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 60px;
                    height: 60px;
                    display: flex;
                }
                .left-btn{
                    text-align: center;
                    font-size: 30px;
                    font-weight: 400;
                    flex: 1;
                }
                .center-btn{
                    text-align: center;
                    font-size: 30px;
                    font-weight: 400;
                    flex: 1;
                }
                .right-view{
                    flex: 1;
                    padding-right: 20px;
                    .btn{
                        text-align: right;
                        font-size: 30px;
                        font-weight: 400;
                        color: white;
                    }
                }
                p{
                    color: white;
                }
           }
           .goodlist{
                border-top: 30px solid #EEEEEE;
                border-bottom: 20px solid #EEEEEE; // cell 单元的地步有10px的border 所以这里不用像 top 一样设置30px
                margin-top: 100px;
                margin-bottom: 150px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .goods{
                    background-color: #c49852;
                    width: 100%;
                    height: 255px;
                    background: #fff;
                    display: flex;
                    flex-direction: row;
                    padding: 20px;
                    border-bottom: 15px solid #EEEEEE;
                    .selectView {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-right: 20px;
                        .selectBtn {
                            width: 35px;
                            height: 35px;
                            border-radius: 20px;
                            img {
                                width:100%;
	                            height:auto;
                            }
                        }
                    }
                    
                    .imgs{
                        width: 200px;
                        height: 200px;
                        img{
                          width: 100%;
                          height: 100%; 
                          border-radius: 20px;
                        }
                    }
                    .content{
                        display: flex;
                        flex: 1;
                        padding: 0px 0px 0px 20px;
                        flex-direction: column;
                        justify-content: center;
                        height: 200px;
                        p{
                            font-size: 33px;
                            width: 100%;
                            margin-top: 5px;
                        }
                        .priceView{
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            .pirce{
                                font-size: 33px;
                                margin-top: 5px;
                                color: tomato;
                                font-size: 38px;
                                font-weight: 700; 
                            }
                            .countNumber{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                .addBtn{
                                    font-size: 35px;
                                    font-weight: 400;
                                    text-align: center;
                                }
                                .number{
                                    margin: 0px 20px 0px 20px;
                                    font-size: 35px;
                                    font-weight: 500;
                                    text-align: center;
                                    width: 80px;
                                    background-color: #EEEEEE;
                                    border-radius: 10px;
                                }
                                .subtrBtn{
                                    font-size: 35px;
                                    font-weight: 400;
                                    text-align: center;
                                }
                            }
                        }
                        
                    }
                }
                // div:last-child{
                //     margin-bottom: 160px;
                // }
           }
           .bottomView{
               position: fixed;
               height: 100px;
               width: 100%;
               background-color: rgb(250, 250, 250);
               background-image: linear-gradient(to bottom, rgb(250, 250, 250) , rgb(231, 231, 231));
               border: 1px solid rgb(238, 233, 233);
               bottom: 2rem;
               display: flex;
               flex-direction: row;
               //padding: 20px;
               align-items: center;
               justify-content: space-between;
               .view{
                    display: flex;
                    flex-direction: row;
                    padding: 20px;
                    align-items: center;
                    justify-content: space-between;
                   .selectView {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-right: 20px;
                        .selectBtn {
                            width: 35px;
                            height: 35px;
                            border-radius: 20px;
                            img {
                                width:100%;
                                height:auto;
                            }
                        }
                    }
                    .allText {
                        font-size: 30px;
                        font-weight: 350; 
                    }
                    .totalText {
                        display: flex;
                        flex-direction: row;
                        margin-left: 20px;
                        font-size: 25px;
                        font-weight: 300;
                        .price{
                            font-weight: 500;
                        }
                    }
               }
                .settlementBtn {
                    text-align: center;
                    margin-right: 20px;
                    background-color: red;
                    padding: 10px 20px 10px 20px;
                    color: white;
                    font-size: 25px;
                    letter-spacing: 3px;
                    font-weight: 350; 
                    border-radius: 10px;
                    
                }
           }
           .else{
               font-size: 40px;
               p{
                   margin: auto;
                   margin-top: 150px;
                   text-align: center;
               }
           }
       }
</style>